<template>
  <div class="index">
    <!-- 维修档案 -->
    <h2
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      维修经费
    </h2>
    <div class="monter">
      <table class="monter-first">
        <tr>
          <td>
            <div class="block">
              <span class="demonstration">开始时间：</span>
              <el-date-picker
                v-model="valuedate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </td>
          <td>
            <div class="block">
              <span class="demonstration">结束时间：</span>
              <el-date-picker
                v-model="value2"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </div>
          </td>
          <td>
            <el-button
              type="primary"
              icon="el-icon-zoom-in"
              size="mediu"
              @click="sosuo"
              >查询</el-button
            >
            <el-button
              type="info"
              icon="el-icon-refresh-right"
              size="mediu"
              @click="congz"
              >重置</el-button
            >
          </td>
        </tr>
        <tr>
          <td class="trd">
            <div class="sol">搜索：</div>
            <el-input v-model="input3" placeholder="请输入内容"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="last">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="维修单号"></el-table-column>
        <el-table-column prop="equipment" label="装备名称"></el-table-column>
        <el-table-column
          prop="equipmentNumber"
          label="装备编号"
        ></el-table-column>

        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="testResults" label="维修结果"></el-table-column>
        <el-table-column prop="keepMoney" label="维修经费"></el-table-column>
        <el-table-column prop="xd" label="操作">
          <template slot-scope="scope">
            <el-button
              class="view_btn"
              type="primary"
              icon="el-icon-view"
              @click="jinfeixq(scope.row.id)"
              size="small"
            >
            </el-button>
            <el-button
              class="edit_btn"
              type="primary"
              icon="el-icon-edit-outline"
              @click="xiugai(scope.row.id)"
              size="small"
            >
            </el-button>
            <el-button
              class="del_btn"
              type="delete"
              icon="el-icon-delete"
              @click="delet(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改内容 -->
      <el-dialog title="经济维修" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="维修单号" :label-width="formLabelWidth">
            <el-input
              v-model="form.id"
              autocomplete="off"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="装备名称" :label-width="formLabelWidth">
            <el-input
              v-model="form.equipment.equipmentName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="装备编号" :label-width="formLabelWidth">
            <el-input
              v-model="form.equipmentNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="维修金额" :label-width="formLabelWidth">
            <el-input v-model="form.keepMoney" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="surexiu">确 定</el-button>
        </div>
      </el-dialog>
      <div class="nex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <span class="demonstration">直接前往</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      input3: "",
      valuedate: "",
      currentPage3: 1,
      page: 1,
      total: 1,
      tableData: [
        {
          weiId: 20123212,
          zbName: "轻型步兵战车",
          zbid: "9451516",
          gzcom: "发动机启动不了，刹车失灵",
          startdate: "2021/10/1",
          enddate: "维修中",
          wxjg: "成功",
        },
      ],
      form: {
        endTime: "",
        equipment: {
          equipmentName: "",
        },
        equipmentId: 0,
        equipmentNumber: 0,
        id: 0,
        keepMoney: 0,
        startTime: "",
        testResults: 0,
      },
      dialogFormVisible: false,
      formLabelWidth: "180px",
    };
  },
  methods: {
    jinfeixq(ev) {
      this.$router.push({ path: "/home/Jfxq", query: { id: ev } });
      console.log(ev);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.xuanr();
    },
    switchDate: function (sj) {
      var now = new Date(sj);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      return year + "-" + month + "-" + date;
    },
    //确认修改
    surexiu() {
      console.log(this.form, this.form.equipment.id, this.form.id);
      this.$axios({
        url: "/KeepFunds/update",
        method: "put",
        data: {
          endTime: this.form.endTime,
          equipmentId: this.form.equipment.id,
          equipmentNumber: this.form.equipmentNumber,
          id: this.form.id,
          keepMoney: this.form.keepMoney,
          startTime: this.form.startTime,
          testResults: this.form.testResults,
        },
      }).then((res) => {
        console.log(res);
        if (!res.data.data) {
          this.dialogFormVisible = false;
          this.xuanr();

          this.$message({
            showClose: true,
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "修改失败",
            type: "warning",
          });
        }
      });
    },
    //修改
    xiugai(ev) {
      this.$axios({
        url: "/KeepFunds/queryAllKeepFunds",
        method: "post",
        data: {
          endTime: null,
          id: ev,
          startTime: null,
        },
        params: {
          limit: 5,
          page: 1,
        },
      }).then((res) => {
        this.form = res.data.data[0];

        this.dialogFormVisible = true;
        console.log(this.form);
      });
    },
    //删除
    delet(ev) {
      console.log(ev);
      this.$axios({
        url: "/KeepFunds/delete",
        method: "delete",
        params: { id: ev },
      }).then((res) => {
        this.xuanr();
        if (!res.data.data) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "warning",
          });
        }
      });
    },
    //渲染页面
    xuanr() {
      this.$axios({
        url: "/KeepFunds/queryAllKeepFunds",
        method: "post",
        data: {
          endTime: this.value2,
          id: this.input3 == "" ? null : this.input3,
          startTime: this.valuedate,
        },
        params: {
          limit: 5,
          page: this.page,
        },
      }).then((res) => {
        this.tableData = [];
        console.log(res);
        this.total = res.data.total;
        for (let i = 0; i < res.data.data.length; i++) {
          res.data.data[i].equipment = res.data.data[i].equipment.equipmentName;
          res.data.data[i].startTime = this.switchDate(
            res.data.data[i].startTime
          );
          res.data.data[i].endTime = this.switchDate(res.data.data[i].endTime);
          res.data.data[i].testResults =
            res.data.data[i].testResults == 1 ? "维修成功" : "待维修";
          console.log(res.data.data[i].equipment);
          this.tableData.push(res.data.data[i]);
        }
      });
    },
    //重置
    congz() {
      this.valuedate = "";
      (this.value2 = ""), (this.input3 = ""), (this.page = 1);
      this.xuanr();
    },
    //搜索
    sosuo() {
      this.xuanr();
    },
  },
  mounted: function () {
    this.page = 1;
    this.xuanr();
  },
};
</script>

<style scoped>
.index {
  padding: 30px;
}

.monter-first {
  width: 100%;
  margin: 40px;
}
tr > td {
  width: 500px;
}
tr {
  height: 50px;
  line-height: 50px;
}
.trd {
  display: flex;
}
table {
  width: 1900px;
}
.trd > div:nth-child(1) {
  width: 70px;
}
.sol {
  margin-right: 8px;
}
.trd .el-input {
  width: 220px;
}
.index .monter .el-input__inner {
  width: 384px;
}
.nex {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-right: 20px;
}
.del_btn {
  font-size: 14px;
  color: #ffc5c5;
  background: #fef3f3;
  border-color: #fef3f3;
}

.edit_btn {
  font-size: 14px;
  color: #5fa4e2;
  background: #eef6fc;
  border-color: #eef6fc;
}
</style>